<template>
  <f7-page>
    <f7-navbar title="绑定邮箱" back-link="返回"></f7-navbar>
    <div class="container-box">

      <custom-input type="email" label="邮箱" placeholder="请输入邮箱" v-model="formItems.email"></custom-input>
      <custom-input
        label="邮箱验证码"
        placeholder="请输入验证码"
        sms-code
        :count="12"
        :sms-status.sync="smsStatus"
        @send="handleSend"
        v-model="formItems.code"
      ></custom-input>

      <f7-button fill @click="handleBindEmail">确定</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { bindEmail } from "../api/my";

  export default {
    name: "bind-email",
    data() {
      return {
        smsStatus: false,
        formItems: {
          email: '',
          code: ''
        }
      }
    },
    methods: {
      handleSend() {
        setTimeout(() => {
          this.smsStatus = true;
        }, 2000)
      },
      handleBindEmail() {
        bindEmail(this.formItems).then(() => {
          this.$store.dispatch('GetInfo');
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>